---
title: VictoryArea
---

:::info
For examples of `VictoryArea` in action, visit the [Area Chart](/docs/charts/area) examples.
:::

## Inherited Props

<CommonProps
  interfaces={[
    "VictoryCommonProps",
    "VictoryDatableProps",
    "VictoryMultiLabelableProps",
    "VictoryEventProps",
  ]}
  overrides={[
    "dataComponent",
    "groupComponent",
    "labelComponent",
    "events",
    "eventKey",
  ]}
/>

## Component Props

---

### dataComponent

<Badges>
  <TypeBadge value="ReactElement" />
  <DefaultsBadge value="<Area>" />
</Badges>

`VictoryArea` overrides the standard [`dataComponent`](/docs/api/victory-datatable-props#datacomponent) prop and supplies the following props to its `dataComponent`:

- `data`
- `events`
- `groupComponent`
- `interpolation`
- `origin` (for polar charts)
- `polar`
- `scale`
- `style`

:::note
Because `VictoryArea` renders a single element to represent the entire dataset, the `dataComponent` it renders will not have access to `datum` like the `dataComponent` elements rendered by other Victory components such as `VictoryScatter`.
:::

---

### eventKey

<Badges>
  <TypeBadge value="string | number | string[] | number[] | (args: CallbackArgs) => string | number" />
</Badges>

`VictoryArea` uses the standard `eventKey` prop. [Read about the `eventKey` prop in more detail here](/docs/guides/events)

:::note
`VictoryArea` only renders one element per dataset, so only one event key will be generated.
:::

---

### events

<Badges>
  <TypeBadge value="array[object]" />
</Badges>

`VictoryArea` uses the standard `events` prop. [Read about it in detail](/docs/guides/events)

See the [Events Guide](/docs/guides/events) for more information on defining events.

:::note
`VictoryArea` uses the special `eventKey` "all" rather than referring to data by index, as it renders only one element for an entire dataset
:::

```jsx live
<div style={{ margin: 50 }}>
  <h3>Click the area chart element</h3>
  <VictoryArea
    events={[
      {
        target: "data",
        eventHandlers: {
          onClick: () => {
            return [
              {
                eventKey: "all",
                mutation: (props) => {
                  const fill =
                    props.style &&
                    props.style.fill;
                  return fill ===
                    "black"
                    ? null
                    : {
                        style: {
                          fill: "black",
                        },
                      };
                },
              },
            ];
          },
        },
      },
    ]}
    data={sampleData}
    theme={VictoryTheme.clean}
  />
</div>
```

---

### groupComponent

<Badges>
  <TypeBadge value="ReactElement" />
  <DefaultsBadge value="<VictoryClipContainer>" />
</Badges>

`VictoryArea` uses the standard `groupComponent` prop. [Read about it in detail](/docs/api/victory-common-theme-props#groupcomponent)

:::note
`VictoryArea` uses [`VictoryClipContainer`](/docs/api/victory-clip-container) as its default `groupComponent` `VictoryClipContainer` renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. 
:::

:::warning
Using a custom `groupComponent` with `VictoryArea` may result in broken animations.
:::

```jsx live
<VictoryChart
  theme={VictoryTheme.clean}
>
  <VictoryArea
    groupComponent={
      <VictoryClipContainer
        clipPadding={{
          top: 5,
          right: 10,
        }}
      />
    }
    style={{
      data: {
        stroke: "#c43a31",
        strokeWidth: 5,
        strokeLinecap: "round",
      },
    }}
    data={sampleData}
  />
</VictoryChart>
```

---

### interpolation

<Badges>
  <TypeBadge value="InterpolationPropType | Function" />
  <DefaultsBadge value='"linear"' />
</Badges>

The `interpolation` prop determines how data points should be connected when creating a path. Victory uses [d3-shape](https://github.com/d3/d3-shape#curves) for interpolating curves.

#### Interpolation Options

Both cartesian and polar charts may use the following interpolation options:

- `"basis"`
- `"cardinal"`
- `"catmullRom"`
- `"linear"`

Cartesian charts may also use the following interpolation options:

- `"monotoneX"`
- `"monotoneY"`
- `"natural"`
- `"step"`
- `"stepAfter"`
- `"stepBefore"`

You can also provide a [custom curve function](https://github.com/d3/d3-shape#custom-curves).

```jsx live
<VictoryArea
  interpolation="natural"
  data={sampleData}
  theme={VictoryTheme.clean}
/>
```

---

### labelComponent

<Badges>
  <TypeBadge value="ReactElement" />
  <DefaultsBadge value="<VictoryLabel renderInPortal />" />
</Badges>

`VictoryArea` uses the standard `labelComponent` prop. [Read about it in detail](/docs/api/victory-datatable-props#datacomponent)

:::note
To enable tooltips on `VictoryArea`, it is necessary to use [`VictoryVoronoiContainer`](/docs/api/victory-voronoi-container)
:::

```jsx live
<VictoryArea
  data={sampleData}
  labels={({ datum }) => datum.y}
  labelComponent={
    <VictoryLabel
      renderInPortal
      dy={-20}
    />
  }
  theme={VictoryTheme.clean}
/>
```

---

### style

<Badges>
  <TypeBadge value="VictoryStyleInterface" />
  <DefaultsBadge value="(provided by theme)" />
</Badges>

Defines the style of the component using [VictoryStyleInterface](/docs/api/victory-style-interface).

:::note
Since `VictoryArea` renders a single element to represent an entire dataset, it is not possible to use functional styles to change the style of the line as a function of an individual `datum`. Instead, try using [gradient fills](/docs/guides/themes#gradient-fills) for styling continuous data.
:::

```jsx live
<VictoryArea
  style={{
    data: {
      fill: "#c43a31",
      fillOpacity: 0.7,
      stroke: "#c43a31",
      strokeWidth: 3,
    },
    labels: {
      fontSize: 15,
      fill: ({ datum }) =>
        datum.x === 3
          ? "#000000"
          : "#c43a31",
    },
  }}
  data={sampleData}
  labels={({ datum }) => datum.x}
  theme={VictoryTheme.clean}
/>
```
